<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>

<body>
    <div id="app">
        {{person.name}}
        <p id="p1">123{{person.name}}</p>
        {{person.obj.a}}
        <button @click="person.obj.a++">++</button>
        <button @click="test">监听</button>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    person: {
                        name: 'jack',
                        obj: {
                            a: 1,
                            b:2,
                        }
                    }
                };
            },
            methods: {
                test(){
                    this.$watch('person.obj.a',(newV,oldV) => {
                        console.log(newV,oldV);
                    })
                }
            },
            computed: {
            },
            watch: {
                // name(newV, oldV) {
                //     console.log('new:' + newV + '****' + 'old:' + oldV);
                // }
                // person(newV, oldV){
                //     console.log('new:' + newV + '****' + 'old:' + oldV);
                // }
                'person.name': {
                    handler(newV, oldV) {
                        let p1 =document.querySelector('#p1')
                        // console.log(p1);
                        console.log(p1.innerText);
                        console.log('new:' + newV + '****' + 'old:' + oldV);
                    },
                    deep: true,
                    // immediate: true,
                    flush : 'post',
                },
                
            }
        })
        const vm=app.mount("#app");
        const unwatch=vm.$watch('person.obj.a',(newV,oldV) => {
                        console.log(newV,oldV);
                    })
    </script>
</body>

</html>